<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快车租车 - 车辆预约</title>
    <link rel="stylesheet" href="../css/reservation-form.css">
    <script src="../utils/cookieUtils.js"></script>
    <script src="../utils/api.js"></script>
    <script src="../js/authTokenManager.js"></script>
    <script src="../js/reservation-form.js"></script>
</head>
<body>
    
    <div class="head-container">
        <div class="logo-section">
            <img src="../img/logo.png" alt="快车租车" class="logo-img" onclick="window.location.href='../index.html'" style="cursor: pointer;">
            <div class="logo-text">快车租车</div>
        </div>
        <div class="user-section">
            <div class="user-info">
                <span class="username" id="username">未登录</span>
                <button class="login-btn" id="loginBtn">登录</button>
                <button class="register-btn" id="registerBtn">注册</button>
                <button class="logout-btn" id="logoutBtn" style="display: none;">退出</button>
            </div>
        </div>
    </div>
    
    <div class="page-title">车辆预约</div>
    
    <div class="reservation-container">
        <div class="car-details">
            <div class="car-gallery">
                <img src="" alt="车辆图片" style="display: none;">
            </div>
            
            <div class="car-title"></div>
            
            <div class="car-specs">
                <div class="spec-item">
                    <div class="spec-label">车牌号码</div>
                    <div class="spec-value"></div>
                </div>
                <div class="spec-item">
                    <div class="spec-label">车辆颜色</div>
                    <div class="spec-value"></div>
                </div>
                <div class="spec-item">
                    <div class="spec-label">车辆状态</div>
                    <div class="spec-value"></div>
                </div>
                <div class="spec-item">
                    <div class="spec-label">座位数量</div>
                    <div class="spec-value"></div>
                </div>
                <div class="spec-item">
                    <div class="spec-label">动力类型</div>
                    <div class="spec-value"></div>
                </div>
                <div class="spec-item">
                    <div class="spec-label">租用次数</div>
                    <div class="spec-value"></div>
                </div>
                <div class="spec-item">
                    <div class="spec-label">可租开始时间</div>
                    <div class="spec-value"></div>
                </div>
                <div class="spec-item">
                    <div class="spec-label">可租结束时间</div>
                    <div class="spec-value"></div>
                </div>
            </div>
            
            <div class="price-info">
                <div class="price-label">车辆租金说明</div>
                <div class="price-value"></div>
                <div class="price-desc" style="font-size: 13px; color: #666;">
                    包含基础保险，额外服务需另行付费
                </div>
            </div>
        </div>
        
        <div class="reservation-form">
            <div class="form-title">预约信息</div>
            
            <div class="form-group">
                <label class="form-label">取车日期</label>
                <input type="date" class="form-input">
            </div>
            
            <div class="form-group">
                <label class="form-label">还车日期</label>
                <input type="date" class="form-input">
            </div>
            
            <div class="form-group">
                <label class="form-label">取车/还车时间</label>
                <div class="date-group">
                    <input type="time" class="form-input" value="09:00">
                    <input type="time" class="form-input" value="09:00">
                </div>
            </div>
            
            <div class="total-info">
                <div class="total-row">
                    <div class="total-label">车辆租金 (0天)</div>
                    <div class="total-value">¥0</div>
                </div>
                <div class="total-amount">
                    <div>总计</div>
                    <div>¥0</div>
                </div>
            </div>
            
            <button class="action-btn submit-btn">确认预约</button>
            <button class="action-btn back-btn">返回车辆列表</button>
        </div>
    </div>
    
    <div class="footer">
        © 2023 快车租车 版权所有 | 联系方式：400-123-4567
    </div>
</body>
</html>